<template>
	<view class="bigBox">
		<!-- backgroundImage:paramsData.status == 3?  'url(' + url2 + ')' : paramsData.status == 2? 'url(' + url3 + ')': 'url(' + url1 + ')' , -->
		<view class="box" :style="{backgroundImage:paramsData.status == 3 ? 'url(' + require('@/static/newImg/detail2.png') + ')' : 
			  paramsData.status == 2? 'url(' + require('@/static/newImg/detail3 (1).png') + ')': 'url(' + require('@/static/newImg/addimg (1).png') + ')',
			}">
			<!-- <img class="headImg" :src="paramsData.status == 3 ?url2:paramsData.status == 2 ?url3: url1" /> -->
			<view class="box1">
				<view class="typesName" :style="{
					background:  paramsData.status == 3? 
					'linear-gradient( 270deg, #FA6400 35%, rgba(250,154,90,0) 100%)'
					:paramsData.status == 1? 
					'linear-gradient( 270deg, #5E76E9 35%, rgba(145,161,239,0.1) 100%)' :
					'linear-gradient( 270deg, #C0C0C0 25%, rgba(192,192,192,0) 100%)'
				}">
					{{paramsData.status== 1? '退役需': paramsData.status==2?'已退役' :'超服役'}}
				</view>
				<view class="head1">
					{{paramsData.name}}
				</view>
				<view class="head2">
					日均价格：<text class="num">{{paramsData.rijun}}</text> 元/天
				</view>
				<view class="head2">
					服役时间：<text class="num">{{paramsData.yi_day}}</text> 天
				</view>

				<!-- :style="{right: paramsData.status== 1? '63px':'56px'}" -->
				<view class="del" :style="{	right: screenWidth <=  390 ? '100rpx': '110rpx',
					top: screenWidth <=  390 ? '136rpx': '140rpx'
				}">
					<view class="text1">
						{{designation}}
					</view>
					<view class="text2">
						获得称号
					</view>
				</view>
			</view>
		</view>

		<view class="titles">
			时间信息
		</view>
		<view class="box2">
			<view class="box2-left">
				<view class="tl">
					购买日期
				</view>
				<view class="time"
					:style="{color:paramsData.status == 3? '#FA6400': paramsData.status == 2? '#C0C0C0':'#637BE9'}">
					{{paramsData.buy_date}}
				</view>
				<view class="tl">
					退役日期
				</view>
				<view class="time"
					:style="{color:paramsData.status == 3? '#FA6400': paramsData.status == 2?'#C0C0C0':'#637BE9'}">
					{{paramsData.use_date}}
				</view>
				<view class="tl">
					距离退役
				</view>
				<view class="time"
					:style="{color:paramsData.status == 3? '#FA6400': paramsData.status == 2?'#C0C0C0':'#637BE9'}">
					{{paramsData.juli_date}} 天
				</view>
			</view>
			<view class="box2-right">
				<view class="" v-if="paramsData.status == 2">

					<circle-progress class="mine-member-level-progress" :diameter="110" :hoopThickness="8"
						:hoopColor="'#888888'" :percent="paramsData.baifenbi / 100" :fontColor="'#888888'"
						:animate="true" />
				</view>
				<!-- 服役需 -->
				<view class="" v-else-if="paramsData.status == 1">
				
					<circle-progress class="mine-member-level-progress" :diameter="110" :hoopThickness="8"
						:hoopColor="'#637BE9'" :percent="paramsData.baifenbi / 100" :fontColor="'#637BE9'"
						:animate="true" />
				</view>
				<!-- 超服役 -->
				<view class="" v-else>

					<circle-progress class="mine-member-level-progress" :diameter="110" :hoopThickness="8"
						:hoopColor="'#FA9A5A'" :percent="paramsData.baifenbi / 100" :fontColor="'#FA9A5A'"
						:animate="true" />
				</view>

				<view class="tl">
					预计时间与服役时间
				</view>
			</view>
		</view>
		<view class="titles">
			价格信息
		</view>
		<view class="box3">
			<view class="box3-st1" v-if="paramsData.status != 2">
				<view class="box3-item">
					<view class="tl">
						总价
					</view>
					<view class="time"
						:style="{color:paramsData.status == 3? '#FA6400': paramsData.status == 2?'#888888':'#637BE9'}">
						￥{{paramsData.money}} 元
					</view>
				</view>
				<view class="box3-item">
					<view class="tl">
						购入价格
					</view>
					<view class="time"
						:style="{color:paramsData.status == 3? '#FA6400': paramsData.status == 2?'#888888':'#637BE9'}">
						￥{{paramsData.buy_price}}元
					</view>
				</view>
			</view>
			<view v-else-if="paramsData.status==3 ">

			</view>
			<view v-else>
				<view class="boxTy">
					<view class="boxTy-left">
						<view class="text">
							净价格
						</view>
						<view class="money">
							￥{{paramsData.net_price}} 元
						</view>
					</view>
					<view class="boxTy-right">
						<view class="text">
							购入价格
						</view>
						<view class="money">
							￥{{paramsData.buy_price}} 元
						</view>
						<view class="text">
							售出价格
						</view>
						<view class="money">
							￥{{paramsData.sell_price!=undefined ?paramsData.sell_price: 0 }} 元
						</view>
					</view>
				</view>

			</view>
		</view>

		<view class="box4" v-show="paramsData.addition_list">
			<view class="box4heads">
				<view class="box4heads-cot">
					<view class="tl">
						附加价格 ：
					</view>
					<view class="money"
						:style="{color:paramsData.status == 3? '#FA6400': paramsData.status == 2 ?'#888888':'#637BE9'}">
						￥{{paramsData.addition_price}} 元
					</view>
				</view>
				<view class="btncont" v-show="paramsData.status != 2">
					<button class="btn" @click="addCot">添加</button>
				</view>
			</view>

			<view class="tab">
				<view class="head">
					<view class="titl">
						金额
					</view>
					<view class="titl">
						备注
					</view>
				</view>

				<view class="foot" v-for="(item,index) in paramsData.addition_list" :key="index">
					<view class="titl">
						￥{{item.price}}
					</view>
					<view class="titl ">
						<view class="titl2">{{item.remark}}</view>
						<image v-show="paramsData.status != 2" @click="delItem(item.id)"
							src="@/static/newImg/del1 (1).png" class="imgs"></image>
					</view>
				</view>
			</view>
		</view>



		<button v-show="paramsData.status != 2" @click="showRetirement" class="FotBtn">立即退役</button>
		<button @click="delRetirement" class="DelBtn">删除</button>

		<addPop v-show="addPopShow" @closeAdd="closeAdd" :flowId="flowId"></addPop>
		<newRet :screenWidth="screenWidth" :Flowid='newRetID' :open="openFlag" @closeRet="closeRet" @isClose="isCloseVip"></newRet>
	</view>
</template>

<script>
	import newRet from '@/pages/tabBar/component/newRet/newRet.vue'
	import addPop from '@/pages/tabBar/component/addPop/addPop.vue'
	import photo from '@/common/photo.js'
	import circleProgress from "@/pages/tabBar/component/circle-progress/circle-progress.vue";
	export default {
		components: {
			newRet,
			addPop,
			circleProgress
		},
		data() {
			return {
				bkcolor1: '270deg, #FA6400 35%, rgba(250,154,90,0) 100%',
				url1: '/static/newImg/addimg1.png',
				url2: '/static/newImg/detail1.png',
				url3: '/static/newImg/detail3.png',
				openFlag: false,
				paramsData: {},
				designation: '',
				flowId: '',
				// 添加附加价格
				price: '',
				remark: '',
				newRetID: '',
				addPopShow: false,

				currentPercent: 0,
				screenWidth: 0
			};
		},
		onLoad(e) {
			if (uni.getStorageSync('user_token')) {
				// console.log(decodeURIComponent(option.id));
				// console.log(JSON.parse());
				this.flowId = e.id
				this.getData(e.id)
				
				uni.getSystemInfo({
					success: (res) => {
						this.screenWidth = res.windowWidth; // 屏幕宽度，单位为px
						// const screenHeight = res.windowHeight; // 屏幕高度，单位为px
						// console.log('屏幕宽度：', screenWidth);
						// console.log('屏幕高度：', screenHeight);
					},
				});
			}
		},
		methods: {
			// 删除当前详情
			delRetirement() {
				this.$api.delApi({
					id: this.flowId
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '删除成功',
							icon:'error'
						})
						uni.switchTab({
							url: '/pages/tabBar/goods/goods'
						});
					}
				});
			},
			closeAdd() {
				this.addPopShow = false
				this.getData(this.flowId)
			},
			// 删除
			delItem(id) {
				console.log(id);
				this.$api.del_priceApi({
					id: id
				}).then(res => {
					if (res.code == 1) {
						this.getData(this.flowId)
						uni.showToast({
							title: '删除成功'
						})
					}
				});
			},
			addCot() {
				this.addPopShow = true
			},
			closeRet() {
				this.openFlag = false
			},
			showRetirement() {
				this.openFlag = true
				this.newRetID = this.flowId
			},
			isCloseVip() {
				this.openFlag = false
			},
			determineRange(number) {
				let title = ''
				if (number > 14.6) {
					return title = '穷奢极欲'
				} else if (number > 10.8 && number < 14.6) {
					return title = '大手大脚'
				} else if (number > 7.2 && number < 10.8) {
					return title = '精打细算'
				} else if (number > 3 && number < 7.2) {
					return title = '勤俭节约'
				} else if (number > 0 && number < 3) {
					return title = '艰苦朴素'
				} else {
					return title = '暂无称号'
				}
			},
			getData(id) {
				this.$api.goodDetail({
					id: id
				}).then(res => {
					if (res.result != null) {
						this.paramsData = res.result
						this.designation = this.determineRange(Number(res.result.rijun))
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.bigBox {
		// padding: 0 20px;
		padding-bottom: 30px;
	}

	/deep/ .uni-popup-dialog>.uni-dialog-content {
		display: flex;
		flex-direction: column;
	}

	.itemDialog {
		display: flex;
		margin: 10px;

		.inpt {
			border: 1px solid #D8D8D8;
		}
	}

	.box {
		// border-radius: 14px;
		// width: 100%;
		height: 155px;
		margin: 0 20px;
		// height: 283px;
		// background-image: url('/static/newImg/addimg1.png');
		background-size: cover;
		/* 根据需要设置背景图片的位置 */
		background-repeat: no-repeat;
		// background-position: '0 120%';
		/* 防止背景图片重复 */
		position: relative;

		.box1 {
			// width: 100%;
			// padding: 0 0 0 10px;
			// position: absolute;
			// top: 0;
			// left: 0;
			// margin: 0 20px;

			.typesName {
				position: absolute;
				top: 0;
				left: 0;
				width: 117px;
				height: 30px;
				// background: linear-gradient( 270deg, #FA6400 35%, rgba(250,154,90,0) 100%);
				border-radius: 6px 6px 6px 6px;
				font-family: Roboto, Roboto;
				font-weight: 500;
				font-size: 14px;
				color: #FFFFFF;
				line-height: 30px;
				text-align: center;
			}

			.head1 {
				font-family: Roboto, Roboto;
				font-weight: 500;
				font-size: 21px;
				color: #FFFFFF;
				padding: 40px 0 8px 25px;
			}

			.head2 {
				font-family: Poppins, Poppins;
				font-weight: 400;
				font-size: 14px;
				color: #FFFFFF;
				padding: 0 0 5px 25px;

				.num {
					font-size: 20px;
					margin: 0 5px;
				}
			}

			.del {
				position: absolute;
				// right: 56rpx;
				// top: 68px;
				right: 87rpx;
				top: 122rpx;

				.text1 {
					font-family: Poppins, Poppins;
					font-weight: 500;
					font-size: 21px;
					color: #fff;
					text-align: center;
				}

				.text2 {
					font-size: 12px;
					color: #fff;
					text-align: center;
				}
			}

			// @media screen and (min-width: 430px) {
			// 	.del {
			// 		position: absolute;
			// 		right: 87rpx;
			// 		top: 122rpx;
			// 	}
			// }
		}
	}

	@media screen and (min-width: 430px) {
		.box {
			background-size: cover;
			background-repeat: no-repeat;
			background-position: '0 160%';
		}
	}

	.titles {
		font-family: Roboto, Roboto;
		font-weight: 500;
		font-size: 16px;
		color: #5E5E5E;
		// margin: 30px 0 20px 20px;
		padding: 30px 0 20px 0px;
		margin: 0 20px;
	}

	.box2 {
		margin: 0 20px;
		padding: 20px 10px 20px 20px;
		height: 160px;
		background: #FFFFFF;
		border-radius: 6px 6px 6px 6px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.tl {
			font-family: Poppins, Poppins;
			font-weight: 400;
			font-size: 10px;
			color: #1E2933;
		}

		&-left {
			.time {
				width: 360rpx;
				height: 26px;
				margin: 4px 0;
				line-height: 26px;
				background: #F8F9F9;
				border-radius: 6px 6px 6px 6px;
				font-family: Poppins, Poppins;
				font-weight: 500;
				font-size: 17px;
				// color: #637BE9;
				text-align: center;
			}
		}

		&-right {
			// margin: 15px 0 0 40px;

			.tl {
				margin-top: 15px;
				text-align: center;
			}
		}
	}

	.box3 {
		margin: 0 20px;
		background: #FFFFFF;
		border-radius: 6px 6px 6px 6px;

		&-st1 {
			height: 43px;
			padding: 17px;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}

		.tl {
			font-family: Poppins, Poppins;
			font-weight: 400;
			font-size: 10px;
			color: #1E2933;
		}

		.time {
			// width: 165px;
			// padding: 0 30px;
			height: 26px;
			background: #F8F9F9;
			border-radius: 6px 6px 6px 6px;
			line-height: 26px;
			font-family: Poppins, Poppins;
			font-weight: 500;
			font-size: 17px;
			color: #637BE9;
			text-align: center;
		}




		.boxTy {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 148px;
			padding: 0 18px;
			background: #FFFFFF;
			border-radius: 6px 6px 6px 6px;
			box-sizing: border-box;
			width: 100%;
			&-left {
				
				width:calc(50% - 18rpx);
				.text {
					font-family: Poppins, Poppins;
					font-weight: 400;
					font-size: 10px;
					color: #1E2933;
				}

				.money {
					// width: 167px;
					padding: 0 18rpx;
					height: 87px;
					background: #F8F9F9;
					border-radius: 6px 6px 6px 6px;
					line-height: 87px;
					text-align: center;
					font-family: Poppins, Poppins;
					font-weight: 500;
					font-size: 17px;
					color: #888888;
				}
			}

			&-right {
				
				width:calc(50% - 18rpx);
				.text {
					font-family: Poppins, Poppins;
					font-weight: 400;
					font-size: 10px;
					color: #1E2933;
				}

				.money {
					// width: 167px;
					padding: 0 18rpx;
					height: 26px;
					margin: 8px 0;
					background: #F8F9F9;
					border-radius: 6px 6px 6px 6px;
					line-height: 26px;
					font-family: Poppins, Poppins;
					font-weight: 500;
					font-size: 17px;
					color: #888888;
					text-align: center;
				}
			}

		}

	}

	.box4 {
		// height: 43px;
		margin: 20px;
		padding: 17px;
		background: #FFFFFF;
		border-radius: 6px 6px 6px 6px;

		.box4heads {
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-cot {
				display: flex;
				align-items: center;
			}
		}

		.tl {
			width: 75px;
			font-family: Poppins, Poppins;
			font-weight: 400;
			font-size: 14px;
			color: #1E2933;
		}

		.money {
			// width: 215px;
			font-family: Poppins, Poppins;
			font-weight: 500;
			font-size: 17px;
			color: #637BE9;
			text-align: left;
		}

		.btncont {
			// margin-left: 10%;

			.btn {
				width: 62px;
				height: 28px;
				background: #5672F3;
				border-radius: 6px 6px 6px 6px;
				color: #fff;
				font-family: Poppins, Poppins;
				font-weight: 500;
				font-size: 14px;
				color: #FFFFFF;
				line-height: 27px;
			}
		}

		.tab {
			.head {
				margin-top: 20px;
				display: flex;
				align-items: center;
				height: 34px;
				line-height: 34px;
				font-family: Poppins, Poppins;
				font-weight: 500;
				font-size: 14px;
				color: #637BE9;
				text-align: center;
				border: 1px solid #D8D8D8;

				.titl:last-child {
					width: 65%;
					border-right: 0;
				}

				.titl:first-child {
					width: 35%;
				}
			}

			.titl {
				border-right: 1px solid #D8D8D8;
			}

			.foot {
				display: flex;
				align-items: center;
				height: 34px;
				line-height: 34px;
				font-family: Poppins, Poppins;
				font-weight: 500;
				font-size: 14px;
				color: #5E5E5E;
				text-align: center;
				border: 1px solid #D8D8D8;
				border-top: 0;

				.titl:first-child {
					width: 35%;
				}

				.titl:last-child {
					width: 65%;
					box-sizing: border-box;
					border-right: 0;
					position: relative;
					display: flex;
					padding-right: 18rpx;
					align-items: center;
					&>.titl2 { 
						flex:1 1 auto;
					} 
					.imgs {
						flex:0 0 auto;
						width: 14px;
						height: 14px;
						top: 10px;
						right: 10px;
					}
				}


			}
		}
	}

	.FotBtn {
		margin-top: 8%;
		// margin-bottom: 10px;
		margin-left: 20px;
		margin-right: 20px;
		color: #fff;
		background: linear-gradient(180deg, #637BE9 0%, #637BE9 100%);
		border-radius: 14px 14px 14px 14px;
		font-family: Poppins, Poppins;
		font-weight: 500;
		font-size: 17px;
	}

	.DelBtn {
		margin-top: 4%;
		margin-left: 20px;
		margin-right: 20px;
		background: #FFFFFF;
		border-radius: 14px 14px 14px 14px;
		border: 1px solid #CCCCCC;
		font-family: Poppins, Poppins;
		font-weight: 500;
		font-size: 17px;
		color: #FF1B1B;
	}
</style>